Skip to content

Conversation

@0xprincedev
Copy link
Contributor

I updated class based components to functional components for question 83: Is it possible to use react without JSX?

    const Greeting = ({ message }) => {
      return <div>Hello {message}</div>;
    };

    ReactDOM.render(
      <Greeting message="World" />,
      document.getElementById("root")
    );
    ```

    You can write the same code without JSX as below,

    ```javascript
    const Greeting = ({ message }) => {
      return React.createElement("div", null, `Hello ${message}`);
    };

    ReactDOM.render(
      React.createElement(Greeting, { message: "World" }, null),
      document.getElementById("root")
    );
    ```

@0xprincedev
Copy link
Contributor Author

I updated after reading your feedback about keeping class based components and add function component version in detail.

class Greeting extends React.Component {
  render() {
    return <div>Hello {this.props.message}</div>;
  }
}

ReactDOM.render(
  <Greeting message="World" />,
  document.getElementById("root")
);

Functional component version

const Greeting = ({ message }) => {
  return <div>Hello {message}</div>;
};

ReactDOM.render(
  <Greeting message="World" />,
  document.getElementById("root")
);

You can write the same code without JSX as below,

class Greeting extends React.Component {
  render() {
    return React.createElement("div", null, `Hello ${this.props.message}`);
  }
}

ReactDOM.render(
  React.createElement(Greeting, { message: "World" }, null),
  document.getElementById("root")
);

Functional component version

const Greeting = ({ message }) => {
  return React.createElement("div", null, `Hello ${message}`);
};

ReactDOM.render(
  React.createElement(Greeting, { message: "World" }, null),
  document.getElementById("root")
);

@0xprincedev 0xprincedev changed the title updated class based components to functional components Keep class based components and add function component version in detail. Oct 30, 2025
@0xprincedev
Copy link
Contributor Author

Could you please review this PR? @sudheerj

@sudheerj
Copy link
Owner

sudheerj commented Nov 2, 2025

@0xprincedev Those are legacy questions. That's why I used the same class component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants